<template>
  <div>
    <div class="search">
      <el-form :inline="true" :model="queryParams">
        <el-form-item label="访客姓名">
          <el-input
            clearable
            filterable
            size="small"
            v-model.trim="queryParams.callName"
            placeholder="请输入"
            @keyup.enter.native="handleSearch"
            @blur="handleSearch"
            @clear="handleSearch"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            size="small"
            v-model="queryParams.dateTime"
            type="date"
            @change="handleSearch"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button v-if="checkAuthority('/select')" type="primary" size="mini" @click="handleSearch"
            >查询</el-button
          >
        </el-form-item>
        <!-- <el-form-item label="数据更新时间：">
          <span>{{updatedTime}}</span>
        </el-form-item> -->
      </el-form>
      <div style="display: flex;">
        <div v-if="checkAuthority('/eyes')" class="switch-btn cursor iconfont" :class="[isShow ? 'icon-yanjing': 'icon-biyan']" @click="handleClickIsShow"></div>
        <div>
          <el-button v-if="checkAuthority('/visitor/down')" size="mini" type="primary" @click="handleExport"
            >导 出</el-button
          >
        </div>
      </div>
    </div>
    <acc-table :tableData="tableData" :columnDefs="columnDefs">
      <template #order="{ index }">
        <span>{{ index | orderIndex(pageVo) }}</span>
      </template>
      <template #identificationNumber={row}>
        <div>{{isShow ?  $options.filters.idCarDesensitization(row.identificationNumber) : row.identificationNumber}}</div>
      </template>
      <template #mobile={row}>
        {{isShow ? $options.filters.cellularPhone(row.mobile) : row.mobile}}
      </template>
      <template #antigenUrl="{ row }">
        <el-popover placement="bottom" width="240" trigger="click">
          <div style="text-align: center">
            <img
              v-if="row.antigenUrl"
              class="code-img"
              :src="`/gateway/api/basic/minio/getFileSource?fileName=${row.antigenUrl}`"
            />
          </div>
          <span slot="reference"
            ><span>{{ row.antigenUrl ? "查看抗原" : "" }}</span></span
          >
        </el-popover>
      </template>
      <template #randomUrl="{ row }">
        <el-popover placement="bottom" width="240" trigger="click">
          <div style="text-align: center">
            <img
              v-if="row.randomUrl"
              class="code-img"
              :src="`/gateway/api/basic/minio/getFileSource?fileName=${row.randomUrl}`"
            />
          </div>
          <span
            slot="reference"
            :style="{
              color:
                (row.healthyColor || '').indexOf('绿') === 0
                  ? 'green'
                  : (row.healthyColor || '').indexOf('黄')
                  ? 'yellow'
                  : 'red',
            }"
            ><span>{{ row.healthyColor ? row.healthyColor : "" }}</span></span
          >
        </el-popover>
      </template>
      <!-- <template #nucleicAcidCode={row}>
          <el-popover
            placement="bottom"
            width="240"
            trigger="click">
            <img v-if="row.nucleicAcidCode" class="code-img" :src="`/gateway/api/basic/minio/getFileSource?fileName=${row.nucleicAcidCode}`"/>
            <span slot="reference"><span>{{row.nucleinResult ? row.nucleinResult : ''}}</span></span>
          </el-popover>
        </template> -->
      <template #tripCode="{ row }">
        <el-popover placement="bottom" width="240" trigger="click">
          <div style="text-align: center">
            <img
              v-if="row.tripCode"
              class="code-img"
              :src="`/gateway/api/basic/minio/getFileSource?fileName=${row.tripCode}`"
            />
          </div>
          <span slot="reference"
            ><span>{{ row.tripCode ? "查看行程码" : "" }}</span></span
          >
        </el-popover>
      </template>
    </acc-table>
    <acc-page
      :total="total"
      :page-size="pageVo.pageSize"
      :current-page="pageVo.pageNum"
      @current-change="handleChangePage"
      @size-change="handleChangeSize"
    ></acc-page>
  </div>
</template>

<script>
import { columnDefs } from './mock'
import { getVisitorIfmt, exportVisitor } from '@/views/children/antiepidemic/js/visitorInfo'
import moment from 'moment'
import Vue from 'vue'
import { decrypt } from '@/utils/crypto'
import { USER_INFO } from '@/store/mutation-types'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限
// import { query } from '@/views/children/antiepidemic/js/dynamicTiming'
export default {
  data () {
    return {
      isShow: true,
      queryParams: {},
      columnDefs: [],
      tableData: [],
      pageVo: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0
      // updatedTime: ''
    }
  },
  created () {
    this.columnDefs = columnDefs
  },
  mounted () {
    this.handleSearch()
    // this.queryCon()
  },
  methods: {
    checkAuthority,
    // 获取更新配置信息
    // queryCon () {
    //   query().then((res) => {
    //     const { code, data } = res
    //     if (code === 0) {
    //       this.updatedTime = data.updatedTime
    //     }
    //   })
    // },
    handleClickIsShow () {
      this.isShow = !this.isShow
    },
    handleSearch () {
      this.pageVo.pageNum = 1
      this.loadDataList()
    },
    loadDataList () {
      const query = {
        ...this.pageVo,
        ...this.queryParams,
        dateTime: this.queryParams.dateTime ? moment(this.queryParams.dateTime).format('YYYY-MM-DD') : '',
        tenantNo: Vue.ls.get(USER_INFO).tenantNo
      }
      getVisitorIfmt({ ...query }).then(res => {
        let { code, data } = res
        data = JSON.parse(decrypt(res.data))
        if (code === 0) {
          // this.tableData = data.records
          this.changeData(data.records)
          this.total = data.total
        }
      })
    },
    handleChangePage (page) {
      this.pageVo.pageNum = page
      this.loadDataList()
    },
    handleChangeSize (size) {
      this.pageVo.pageSize = size
      this.handleSearch()
    },
    async handleExport () {
      await exportVisitor({
        ...this.pageVo,
        ...this.queryParams,
        dateTime: this.queryParams.dateTime ? moment(this.queryParams.dateTime).format('YYYY-MM-DD') : '',
        tenantNo: Vue.ls.get(USER_INFO).tenantNo
      })
    },
    changeData (list) {
      if (!list || list.length === 0) {
        this.tableData = []
      } else {
        this.tableData = list.map((item) => {
          item.mediumHighRisk = this.getmediumHighRiskText(item)
          // item.healthCode = this.getAnswer(item, 'healthCode')
          item.nucleicAcidCode = this.getAnswer(item, 'nucleicAcidCode')
          item.tripCode = this.getAnswer(item, 'tripCode')
          item.vaccines = this.getAnswer(item, 'vaccines')
          return item
        })
      }
    },
    getmediumHighRiskText (row) {
      const { healths = [] } = row
      let Text = ''
      healths.forEach((item) => {
        if (item.questions === '本人及同住人近日是否途径目前仍是中风险地区所在地市？' ||
          item.questions === '本人及同住人近日是否途径目前仍是高风险地区所在地市？') {
          if (item.answer === '是') {
            Text = '是'
          } else if (!Text) {
            Text = '否'
          }
        }
      })
      return Text
    },
    getAnswer (row, key) {
      const { healths = [] } = row
      const keyJson = {
        // 'healthCode': '请上传健康码',
        'nucleicAcidCode': '请上传核酸码',
        'tripCode': '请上传行程码',
        'vaccines': '疫苗接种情况'
      }
      let data = healths.find(item => (item.questions || '').indexOf(keyJson[key]) > -1)
      return data?.answer || ''
    }
  }
}
</script>

<style lang='scss' scoped>
.search {
  display: flex;
  justify-content: space-between;
}
.code-img {
  height: 200px;
  max-width: 200px;
}
.switch-btn{
  width: 50px;
  height: 30px;
  line-height: 30px;
  font-size: 30px;
  text-align: center;
}
</style>
